import React from 'react';

import { View, StyleSheet, TextInput, Text } from 'react-native';

export default ({ value, _onChangeText }) => (
  <View style={styles.container}>
    <TextInput
      style={styles.textArea}
      numberOfLines={3}
      placeholder="填写内容"
      multiline
      onChangeText={(text) => text.length <= 100 && _onChangeText(text)}
      value={value}
      placeholderTextColor="rgba(219,219,219,0.52)"
    />
    <Text style={{ right: 10, bottom: 10, position: 'absolute', zIndex: 1, color: 'white' }}>{value.length}/100</Text>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  textArea: {
    padding: 10,
    margin: 5,
    color: 'white',
    textAlignVertical: 'top',
    borderRadius: 2,
    borderWidth: 1,
    borderColor: 'rgba(219,219,219,0.52)',
  },
});
